<template>
	<view>
		<!-- 下拉菜单 -->
		<u-dropdown border-bottom ref="uDropdown" class='dropdown'>
			<u-dropdown-item v-model="value1" title="排序" :options="options1" />
			<u-dropdown-item v-model="value2" title="流派" :options="options2" />
			<u-dropdown-item title="缩放">
				<view class="slot-content" style="background-color: #FFFFFF;">
					<view class="wrap">
						<u-slider v-model="price" min="3" max="20" />
					</view>
					<view class="price-show">
						<text style="margin: 30rpx;font-size: 30rpx;">缩放等级：{{price}}</text>
						<u-button type="primary" @click="closeDropdown" class='close-button'>确定</u-button>
					</view>
					<u-gap height="20" bg-color="#FFFFFF" />
				</view>
			</u-dropdown-item>
		</u-dropdown>
		<!-- 地图 -->
		<map style="width: 750rpx; height: 1000rpx;" :longitude="currentLongitude" :latitude="currentLatitude"
			:markers="covers" show-location show-compass enable-zoom :scale='price'>
		</map>
		<!-- 详细列表 -->
		<u-gap height="20" bg-color="#ffffff" />
		<view class="list-cell" v-for="(item, index) in venueList" :key="index" @click="navTo(index)">
			<image class="user-images" :src="item.avatar" />
			<view class="user-name">
				<span>{{item.nickname}}</span>
				<view>
					<span class="user-other">{{getDistance(index)}}</span>
					<u-icon name="arrow-right" color="#b0b0b0" size="28" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 地图部分
				currentLongitude: 0,
				currentLatitude: 0,
				covers: [],
				// 下拉框部分
				value1: 1,
				value2: 2,
				value2: 3,
				price: 10,
				options1: [{
						label: '默认排序',
						value: 1,
					},
					{
						label: '距离优先',
						value: 2,
					},
					{
						label: '价格优先',
						value: 3,
					},
					{
						label: '好评优先',
						value: 4,
					}
				],
				options2: [{
						label: '瑜伽',
						value: 1,
					},
					{
						label: '游泳',
						value: 2,
					},
					{
						label: '跑步',
						value: 3,
					}
				],
				venueList: [],
				venueCover: [],
			}
		},
		onLoad() {
			uni.getLocation({
				type: 'gcj02',
				success: (res) => {
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
					this.currentLongitude = res.longitude;
					this.currentLatitude = res.latitude
					this.$u.api.map.findVenues({
						'ln': res.longitude,
						'lg': res.latitude
					}).then(res => {
						this.venueList = res.data
						res.data2.content.splice(0, 1);
						this.venueCover = res.data2.content
						console.log(this.venueList)
						console.log(this.venueCover)
						this.$u.vuex('nearbyVenueList', res.data)
						this.$u.vuex('nearbyVenueSiteList', res.data2.content)


						var covers = this.venueCover.map((obj, index) => {
							var newCover = {};
							newCover.longitude = obj.content.point.x;
							newCover.latitude = obj.content.point.y;
							newCover.iconPath = this.venueList[index].avatar;
							newCover.width = 40;
							newCover.height = 40;
							newCover.callout = {
								content: "昵称：" + this.venueList[index].nickname +
									"\n\n" +
									"手机：" + this.venueList[index].phone,
								fontSize: 20,
								borderRadius: 10,
								borderWidth: 10,
								padding: 20,
								display: 'BYCLICK',
								textAlign: 'center'
							};
							return newCover;
						});
						this.covers = covers

					});
				}
			});
		},
		methods: {
			navTo(index) {
				uni.navigateTo({
					url: '/pages/sys/book/personal-details?type=3&uid=' + index
				});
			},
			closeDropdown() {
				this.$refs.uDropdown.close();
			},
			getReandomImage(i) {
				return '/static/aidex/images/' + this.imageList[i] + '.png';
			},
			getDistance(index) {
				let dis = this.venueCover[index].distance.value
				if (dis < 1) {
					return (dis * 1000).toFixed(2) + ' m '
				} else {
					return dis.toFixed(2) + ' km '
				}
			}

		}
	}
</script>

<style lang="scss">
	.dropdown {
		background-color: #fff;
	}

	.wrap {
		padding: 30rpx;
	}

	.price-show {
		display: flex;
		justify-content: space-between;

		.close-button {
			margin-right: 30rpx;
			margin-top: 10rpx;
		}
	}

	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 8px 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
		align-items: center;
		border-bottom: 1px solid #ececec !important;
	}

	.user-images {
		width: 80rpx;
		height: 80rpx;
		margin-right: 20px;
	}

	.user-name {
		display: flex;
		font-size: 32rpx;
		color: #000000;
		flex: 1;
		justify-content: space-between;

		.user-other {
			font-size: 26rpx;
			color: #999999;
			font-weight: normal;
		}
	}
</style>
